<template>
  <div class="container">
    <div class="reset-card">
      <div class="card-header">
        <h2>找回密码</h2>
        <p>请输入您的注册邮箱，我们将发送验证码帮助您重置密码</p>
      </div>
      
      <el-form class="reset-form" :model="forgotForm" :rules="rules" ref="forgotForm" label-position="top">
        <el-form-item label="邮箱地址" prop="email">
          <el-input 
            v-model="forgotForm.email" 
            placeholder="请输入您的注册邮箱"
            prefix-icon="el-icon-message">
          </el-input>
        </el-form-item>
        
        <el-form-item label="验证码" prop="verificationCode">
          <div class="verification-code-container">
            <el-input 
              v-model="forgotForm.verificationCode" 
              placeholder="请输入验证码"
              prefix-icon="el-icon-key">
            </el-input>
            <el-button 
              type="primary" 
              class="send-code-btn"
              @click="sendVerificationCode('forgotForm')" 
              :disabled="countdown > 0 && countdown < 60">
              {{ countdown < 60 && countdown > 0 ? `${countdown}s` : '获取验证码' }}
            </el-button>
          </div>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" class="submit-btn" @click="verifyCode('forgotForm')">确认重置</el-button>
        </el-form-item>
        
        <div class="form-footer">
          <router-link to="/login" class="back-to-login">返回登录</router-link>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      forgotForm: {
        email: '',
        verificationCode: ''
      },
      countdown: 0,
      timer: null,
      verificationCodeValue: '',
      rules: {
        email: [
          { required: true, message: '请输入注册邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入有效的邮箱地址', trigger: ['blur', 'change'] }
        ],
        verificationCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      }
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    sendVerificationCode(forgotForm) {
      this.$refs[forgotForm].validateField('email', (errorMsg) => {
        if (!errorMsg) { // 如果没有错误消息，则验证通过
          // 使用 params 而不是直接在请求体中发送 email
          this.$axios.get('/email/sendResetCode', {
            params: {
              mailTo: this.forgotForm.email
            }
          }).then(res => {
            if (res.data) {
              this.$message({
                message: '验证码已发送到您的邮箱',
                type: 'success',
                duration: 3000
              });
              this.startCountdown();
              // 保存验证码用于后续验证，使用新的变量名
              this.verificationCodeValue = res.data;
            } else {
              this.$message.error('发送失败，请重试');
            }
          }).catch(() => {
            this.$message.error('发生异常，请稍后再试');
          });
        }
      });
    },
    startCountdown() {
      this.countdown = 60;
      if (this.timer) {
        clearInterval(this.timer);
      }
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(this.timer);
        }
      }, 1000);
    },
    verifyCode(forgotForm) {
      console.log('验证按钮被点击'); // 添加调试日志
      this.$refs[forgotForm].validate((valid) => {
        if (valid) {
          console.log('表单验证通过，准备发送请求'); // 添加调试日志
          // 使用后端接口验证验证码并重置密码
          this.$axios.get('/email/resetPassword', {
            params: {
              mailTo: this.forgotForm.email,
              code: this.forgotForm.verificationCode
            }
          }).then(res => {
            console.log('收到响应:', res.data); // 添加调试日志
            if (res.data.code === 200) {
              this.$message({
                message: '密码重置成功，请使用新密码登录',
                type: 'success',
                duration: 3000
              });
              // 重置成功后直接跳转到登录页面
              this.$router.push({
                name: 'login',
                query: {
                  name: 'login'
                }
              });
            } else {
              this.$message.error(res.data.message || '验证码错误，请重试');
            }
          }).catch(err => {
            console.error('请求出错:', err); // 添加错误日志
            this.$message.error('发生异常，请稍后再试');
          });
        } else {
          console.log('表单验证失败'); // 添加调试日志
        }
      });
    }
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../../static/img/background/bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 20px;
}

.reset-card {
  width: 100%;
  max-width: 450px;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 30px;
  transition: all 0.3s ease;
}

.card-header {
  text-align: center;
  margin-bottom: 30px;
}

.card-header h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
  font-weight: 500;
}

.card-header p {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

.reset-form {
  width: 100%;
}

.el-form-item {
  margin-bottom: 20px;
}

.verification-code-container {
  display: flex;
  align-items: center;
}

.verification-code-container .el-input {
  flex: 1;
}

.send-code-btn {
  margin-left: 10px;
  width: 110px;
  height: 40px;
  padding: 0;
  font-size: 13px;
}

.submit-btn {
  width: 100%;
  height: 45px;
  font-size: 16px;
  letter-spacing: 1px;
  margin-top: 10px;
}

.form-footer {
  text-align: center;
  margin-top: 20px;
}

.back-to-login {
  color: #409EFF;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s;
}

.back-to-login:hover {
  color: #66b1ff;
  text-decoration: underline;
}

/* 响应式调整 */
@media (max-width: 576px) {
  .reset-card {
    padding: 20px;
  }
  
  .card-header h2 {
    font-size: 20px;
  }
  
  .verification-code-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .send-code-btn {
    margin-left: 0;
    margin-top: 10px;
    width: 100%;
  }
}
</style>
